<template>
	<div class="body">
		<el-table :data="showList" stripe style="width: 100%">
			<el-table-column prop="cname" label="名称">
			</el-table-column>
			<el-table-column prop="cpic" label="图片">
				<template slot-scope="prop">
					<img :src="prop.row.cpic">
				</template>
			</el-table-column>
			<el-table-column prop="cid" label="状态">
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<el-pagination background layout="prev, pager, next" :total="userList.length" :page-size="5" @next-click="onClickNext"
		 @prev-click="onClickPre" @current-change="sizeChange">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userList: [],
				showList: [],
				startIndex: 0,
				endIndex: 5,
				offset: 5
			}
		},
		mounted() {
			this.$axios.get('http://api.kudesoft.cn/tdk/category').then(res => {
				console.log(res.data.data.data)
				this.userList = res.data.data.data
				for(let index = this.startIndex;index < this.endIndex ; index++){
					this.showList.push(this.userList[index]);
				}
			})
		},
		methods: {
			onClickNext() {
				this.startIndex += this.offset;
				this.endIndex += this.offset;
				if (this.endIndex > this.userList.length) {
					this.endIndex = this.userList.length;
				}
				this.showList = [];
				for (let index = this.startIndex; index < this.endIndex; index++) {
					this.showList.push(this.userList[index])
				}
			},
			onClickPre() {
				this.startIndex -= this.offset;
				if (this.startIndex < 0) {
					this.startIndex = 0;
				}

				if (this.endIndex === this.userList.length) {
					if (this.userList.length % 5 === 0) {
						this.endIndex -= this.offset
					} else {
						this.endIndex -= (this.userList.length % 5)
					}
				} else {
					this.endIndex -= this.offset
				}
				this.showList = [];
				for (let index = this.startIndex; index < this.endIndex; index++) {
					this.showList.push(this.userList[index])
				}
			},
			sizeChange(i){
				console.log(i)
				this.startIndex = 0;
				this.endIndex = 5;
				this.showList = [];
				this.startIndex = this.startIndex + this.offset * (i - 1);
				this.endIndex = this.endIndex + this.offset * (i - 1);
				if(this.endIndex > this.userList.length){
					this.endIndex = this.userList.length
				}
				for (let index = this.startIndex; index < this.endIndex; index++) {
					this.showList.push(this.userList[index])
				}
			}
		},
		}
</script>

<style scoped>
	.body {
		width: 100%;
	}

	img {
		width: 50px;
		height: 50px;
	}
</style>
